<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Demo</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0"/>
    <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCO_aRinQbO9DZXyCje6dyRvxAmvq-82eo"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        select{
            width: 100px;
            outline: none;
            padding: 5px 5px;
            border: 1px solid #f8f8f8;
            background: #ffffff;
            border-radius: 3px;
        }

        /* 设置地图容器的样式 */
        .map {
            width: 100%;
            height: 200px;
            z-index: 1;
        }
        .wrapDiv{
            position: relative;
        }
        #areaSelect{
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1;
        }

        /* 隐藏谷歌地图的版本号 */
        .gm-style-cc {
            display: none;
        }
    </style>
</head>
<body>
<div class="wrapDiv">
    <div id="map" class="map"></div>
    <select id="areaSelect">
        <option value="پاکستان">پاکستان</option>
        <option value="中国">中国</option>
        <option value="ประเทศไทย">ประเทศไทย</option>
        <option value="Việt Nam">Việt Nam</option>
        <option value="Malaysia">Malaysia</option>
    </select>
</div>

<script>
	let  map,geocoder
	// 初始化地图函数
	function initMap() {
		let latitude,longitude
		if ("geolocation" in navigator) {
			navigator.geolocation.getCurrentPosition(function(position) {
				// 获取到位置信息
				 latitude = position.coords.latitude;
				 longitude = position.coords.longitude;
						geocoder = new google.maps.Geocoder();
						//  创建地图实例，指定地图容器的ID
						map = new google.maps.Map(document.getElementById("map"), {
							zoom: 15,
							center: {lat:latitude, lng:longitude },
							mapTypeControl: false, //地图类型控件
							streetViewControl: false, //地图视角控件
							zoomControl: false // 隐藏缩放控件
						});
						marker = new google.maps.Marker({
							map,
						});
						//初始时候执行一次
						// geocode({address:'پاکستان'})
						document.getElementById('areaSelect').addEventListener('change',function (e){
							let selectedText = e.target.options[e.target.selectedIndex].text;
							geocode({address:selectedText})
						})
			},
                    function(error) {
				// 处理定位错误
				switch(error.code) {
					case error.PERMISSION_DENIED:
						alert("User denied the request for Geolocation.");
						break;
					case error.POSITION_UNAVAILABLE:
						alert("Location information is unavailable.");
						break;
					case error.TIMEOUT:
						alert("The request to get user location timed out.");
						break;
					case error.UNKNOWN_ERROR:
						alert("An unknown error occurred.");
						break;
				}
			});
		} else {
			alert("Geolocation is not supported by this browser.");
		}

	}
	//检索位置
	function geocode(request) {
		geocoder
				.geocode(request)
				.then((result) => {
					const {results} = result;
					map.setCenter(results[0].geometry.location);
					// marker.setPosition(results[0].geometry.location);
					// marker.setMap(map);
				})
				.catch((e) => {
					alert("Geocode was not successful for the following reason: " + e);
				});
	}
</script>

<!-- 在页面加载完毕后调用初始化地图函数 -->
<script>
	// 发送消息给包含的 Uni-app 页面
	window.parent.postMessage({data: 'Hello from embedded web page!'}, '*');
	window.onload = function () {
		initMap();
	};
	window.addEventListener('message', (event) => {
		// 确保接收到正确的消息
		if (event.data && event.data.baseHeight) {
			const baseHeight = event.data.baseHeight;
			// 设置内部元素高度
			const mapElement = document.getElementById('map');
			if (mapElement) {
				mapElement.style.height = `${baseHeight}px`;
				mapElement.style.setProperty('height', `${baseHeight}px`, 'important');
			}
		}
	});
</script>
</body>
</html>
